<template>
  <view class="container">
    <!-- 标题 -->
    <view class="page-title">收货地址</view>
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form :model="form" ref="uForm" label-width="140rpx">
        <u-form-item label="姓名" prop="receiverPerson">
          <u-input v-model="form.receiverPerson" placeholder="请输入收货人姓名" />
        </u-form-item>
        <u-form-item label="电话" prop="receiverPhone">
          <u-input v-model="form.receiverPhone" placeholder="请输入收货人手机号" />
        </u-form-item>
        <u-form-item label="地区" prop="region">
          <!-- <select-region ref="sRegion" v-model="form.region" /> -->
		  <pickerAddress @change="change">{{form.receiverArea}}</pickerAddress>
        </u-form-item>
        <u-form-item label="详细地址" prop="receiverAddr" :border-bottom="false">
          <u-input v-model="form.receiverAddr" placeholder="街道门牌、楼层等信息" />
        </u-form-item>
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress'
  import SelectRegion from '@/components/select-region/select-region'
  import { isMobile } from '@/utils/verify'
  import * as AddressApi from '@/api/address'
  import { addressadd } from '@/tyapi/address.js'

  // 表单字段元素
  const form = {
    name: '',
    phone: '',
    region: [],
    detail: ''
  }

  // 表单验证规则
  const rules = {
    receiverPerson: [{
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change']
    }],
    receiverPhone: [{
      required: true,
      message: '请输入手机号',
      trigger: ['blur', 'change']
    }, {
      // 自定义验证函数
      validator: (rule, value, callback) => {
        // 返回true表示校验通过，返回false表示不通过
        return isMobile(value)
      },
      message: '手机号码不正确',
      // 触发器可以同时用blur和change
      trigger: ['blur'],
    }],
    receiverArea: [{
      required: true,
      message: '请选择省市区',
      trigger: ['blur', 'change'],
      type: 'array'
    }],
    receiverAddr: [{
      required: true,
      message: '请输入详细地址',
      trigger: ['blur', 'change']
    }],
  }

  export default {
    components: {
      SelectRegion,
	  pickerAddress
    },
    data() {
      return {
        form:{
			receiverArea:'选择地址'
		},
        rules,
		txt: '选择地址',
        // 按钮禁用
        disabled: false
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules)
    },

    methods: {
		 change(data) {
		                this.form.receiverArea = data.data.join('')
		                console.log(data.data.join(''))
		            },

      // 表单提交
      handleSubmit() {
        const app = this
        if (app.disabled) {
          return false
        }
        app.$refs.uForm.validate(valid => {
          if (valid) {
            app.disabled = true
            addressadd(app.form)
              .then(result => {
				  console.log(result)
				  if(result.data.code==200){
					  uni.showToast({
					      title: '操作成功',
					      //将值设置为 success 或者直接不用写icon这个参数
					      icon: 'success',
					      //显示持续时间为 2秒
					      duration: 2000
					  })
					  uni.navigateBack()
				  }
                // app.$toast(result.message)
                
              })
              .finally(() => app.disabled = false)
          }
        })
      }

    }
  }
</script>

<style>
  page {
    background: #f7f8fa;
  }
</style>
<style lang="scss" scoped>
  .page-title {
    width: 94%;
    margin: 0 auto;
    padding-top: 40rpx;
    font-size: 28rpx;
    color: rgba(69, 90, 100, 0.6);
  }

  .form-wrapper {
    margin: 20rpx auto 20rpx auto;
    padding: 0 40rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  // 底部操作栏
  .footer {
    margin-top: 80rpx;

    .btn-wrapper {
      height: 100%;
      // display: flex;
      // align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 86rpx;
      color: #fff;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-item-wechat {
      background: #0ba90b;
      margin-bottom: 26rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);
      color: #fff;

      // 禁用按钮
      &.disabled {
        opacity: 0.6;
      }
    }

  }
</style>
